<template>
  <view class="content">
    <view class="addtable">
      <tui-form ref="form" :model="formData" :show-message="false">
        <tui-form-item asterisk borderColor="#cfcfcf" highlight label="姓名" labelSize="30rpx" padding="35rpx"
                       prop="name">
          <tui-input v-model="formData.name" :borderBottom="false" padding="0"
                     placeholder="必填,输入游客姓名"></tui-input>
        </tui-form-item>
        <tui-form-item asterisk borderColor="#cfcfcf" highlight label="身份证" labelSize="30rpx"
                       padding="35rpx" prop="idCard">
          <tui-input v-model="formData.idCard" :borderBottom="false" padding="0"
                     placeholder="必填,输入游客身份证号"></tui-input>
        </tui-form-item>
        <tui-form-item borderColor="#cfcfcf" label="手机号" labelSize="30rpx" padding="35rpx" prop="tel">
          <tui-input v-model="formData.tel" :borderBottom="false" padding="0"
                     placeholder="研学线路为选填,其他线路必填"></tui-input>
        </tui-form-item>
        <tui-form-item v-if="lineType === '研学线路'" label="家长手机号" labelSize="30rpx" padding="33rpx"
                       prop="parentTel">
          <tui-input v-model="formData.parentTel" :borderBottom="false" padding="0"
                     placeholder="必填"></tui-input>
        </tui-form-item>
      </tui-form>
    </view>
    <view class="buttomWarp">
      <view class="submit" @tap="addSubmit()">
        提交
      </view>
    </view>
    <tui-loading v-if="loadingTips" :isMask="true"></tui-loading>
  </view>
</template>

<script>
import {
  addMember
} from '@/api/tourplan.js'

const rules = [{
  name: "name",
  rule: ["required"],
  msg: ["请输入游客姓名"]
}, {
  name: "idCard",
  rule: ["required", "isIdCard"],
  msg: ["请输入游客身份证号", "请输入正确的身份证号码"]
}, {
  name: "tel",
  rule: ["isMobile"],
  msg: ["请输入正确的手机号"]
}, {
  name: "parentTel",
  rule: ["isMobile"],
  msg: ["请输入正确的手机号"]
}]
export default {
  data() {
    return {
      formData: {
        name: '',
        idCard: '',
        tel: '',
        parentTel: '',
        role: 1,
      },
      itineraryId: 0,
      lineType: null,
      loadingTips: false,
    }
  },
  onLoad: function (options) {
    const that = this
    that.itineraryId = options.itineraryId
    that.lineType = options.lineType
  },
  methods: {
    //添加人员
    addSubmit() {
      const that = this
      if (!this.$refs.form) return;
      this.$refs.form.validate(this.formData, rules).then(res => {
        if (res.isPass) {
          if (that.formData.parentsPhone && that.lineType === '研学线路') {
            uni.showToast({
              title: '请输入必要手机号',
              icon: 'none',
              duration: 3000
            })
          } else {
            that.addMemberData()
          }
        } else {
          console.log('res')
          uni.showToast({
            title: res.errorMsg,
            icon: 'none',
            duration: 3000
          })
        }
      }).catch(errors => {
      })
    },
    //提交接口
    addMemberData() {
      const that = this
      that.loadingTips = true
      addMember({
        id: this.itineraryId,
        proposalItineraryParties: this.formData
      }).then(res => {
        that.loadingTips = false
        uni.navigateBack()
      })
    },
    //返回
    back() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
@import url('addPassenger.css');
</style>
